<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>SSD微信公众号-活动</title>
    <% include  public/head%>
    <link rel="stylesheet" type="text/css" href="./../public/front/style/swiper.min.css">

    <link rel="stylesheet" type="text/css" href="./../public/front/style/actity.css">

    <script type="text/javascript" src="./../public/front/js/swiper.min.js"></script>
    <script type="text/javascript" src="./../public/front/js/common.js"></script>

    <!-- Demo styles -->
</head>

<body class="actity">
<div class="container-fluid">
    <div class="content">

            <h3> 近期市场活动</h3>

        <div class="clearfix">
            <!-- <hr style="border-top-color: #70757B;margin-bottom:30px; margin-top:0;"> -->
        </div>
        <div class="bgline">
            <ul class="list">

                <% items.forEach(function(item){ %>
                <a href="./activity_detail?id=<%= item.Id%>"><li class="clearfix">
                        <h3><%= item.Date%><span><%= item.Year%></span></h3>
                        <div class="right">
                            <div class="circle"><%= item.Address%></div>
                            <dl>
                                <dt><%= item.Name%><a href="./activity_detail?id=<%= item.Id%>">点击查看详情</a></dt>
                            </dl>
                        </div>
                    </li></a>
                <% })%>




            </ul>
        </div>
    </div>
    <!--/content-->
</div>
<!--/container-fluid-->
</body>
<script type="text/javascript">
    $(function() {
        systole();


        //js定义line的位置

        var clientWidth = document.documentElement.clientWidth;
        if ($(".content").width() == "740") {
            clientWidth = 740;
        }
        var positionL = clientWidth * .22 + 25;
        $(".bgline").css("background-position", positionL);
    });

    function systole() {
        $(".bgline").css("display","block");
        var $wrapEle = $(".list"),
                parentH, eleTop = [];


        parentH = $wrapEle.height();
        $wrapEle.css("height", 0);

        setTimeout(function() {
            //滑动的效果
            $wrapEle.children('li').each(function(index, el) {
                eleTop.push($(this).position().top);
                // alert($(this).position().top);
                $(this).css({
                    "margin-top": -eleTop[index]
                }).children().hide();
            }).animate({
                "margin-top": 0
            }, 1600).children().fadeIn();


            $wrapEle.animate({
                "height": parentH
            }, 2600);


        }, 600);

    }
</script>

</html>
